<template>
  <a-form class="formHeader">
    <a-row justify="start" :gutter="24">
      <a-col class="formHeader-criteria">
        <a-row :gutter="16">
          <a-col v-for="(item, index) in collectionCopy" :key="index" :span="8">
            <a-form-item :label="item.label" label-col-flex="85px" @keyup.enter="searchInit">
              <a-input v-if="item.isInput" v-model="item.value" :placeholder="item.placeholder" />
              <a-select v-else-if="item.isSelect" v-model="item.value">
                <a-option v-for="(itm, idx) in item.options" :key="idx">{{ itm }}</a-option>
              </a-select>
              <a-checkbox-group v-else-if="item.isCheckbox">
                <a-checkbox v-for="(itm, idx) in options" :key="idx" :value="idx">{{ itm }}</a-checkbox>
              </a-checkbox-group>
              <a-range-picker v-else-if="item.isRangePicker" v-model="item.value" @change="onChange" @select="onSelect" />
            </a-form-item>
          </a-col>
          <a-col v-if="collectionCopy.length < 4" :span="8">
            <a-space :size="20" style="margin-bottom: 15px">
              <a-button type="primary" @click="searchInit">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-col>
      <a-col v-if="collectionCopy.length > 3" class="formHeader-btn">
        <a-space direction="vertical" :size="Math.ceil(collectionCopy.length / 3) == 2 ? 20 : spaceVal">
          <a-button v-for="(item, index) in btns" :key="index" @click="btnClick(item)">
            <template #icon>
              <component :is="item.icon"></component>
            </template>
            <template #default>{{ item.name }}</template>
          </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>
<script lang="ts">
import importConfig from './formHeader';
import { toRefs } from 'vue';

export default {
  name: 'FormHeader',
  props: {
    collection: {
      type: Array,
      default: () => [],
    },
    btns: {
      type: Array,
      default: () => [
        {
          icon: 'icon-search',
          name: '查询',
        },
        {
          icon: 'icon-refresh',
          name: '重置',
        },
      ],
    },
  },
  emits: ['update:collection', 'tapDate'],
  setup(props, { emit }) {
    const { base, init, searchInit, reset, btnClick } = importConfig(props, { emit });
    init();
    return {
      ...toRefs(base),
      searchInit,
      reset,
      btnClick,
    };
  },
};
</script>
<style lang="less" scoped>
.formHeader {
  
}
.formHeader {
  &-criteria {
    flex: 1 1 0;
  }

  &-btn {
    flex: 1;
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
</style>
